import PropTypes from 'prop-types'
import React, { memo, useState, useCallback } from 'react'
import { SectionWrapperV2 } from './style'
import SectionHeader from '@/components/section-header'
import SectionTabs from '@/components/section-tabs'
import SectionRooms from '@/components/section-rooms'
import SectionFooter from '@/components/section-footer'

const HomeSectionV2 = memo((props) => {
  const {infoData} = props
  const tabNames = infoData.dest_address?.map(item => item.name)
  // 根据tab-name切换roomList数据
  const intialName = infoData.dest_address?.[0].name
  const [name, setName] = useState(intialName)
  // 只执行一次
  const handleTabClick = useCallback((index, name) => {
    // console.log('index', name)
    setName(name)
  }, [])

  return (
    <SectionWrapperV2>
      <SectionHeader title={infoData.title} subtitle={infoData.subtitle}/>
      <SectionTabs tabNames={tabNames} tabClick={handleTabClick}/>
      <SectionRooms roomList={infoData.dest_list?.[name]} roomWidth={'calc(100% / 3)'}/>
      <SectionFooter name={name} />
    </SectionWrapperV2>
  )
})

HomeSectionV2.propTypes = {
  infoData: PropTypes.object
}

export default HomeSectionV2